<?php $__env->startSection('title','我的会员卡'); ?>

<?php $__env->startSection('css'); ?>
    <link rel="stylesheet" href="<?php echo e(asset('/css/card.css')); ?>">
    <style>

        .top{
            width: 100%;
            height: 200px;
            background: url("/images/version1/bkg-bind-phone.png") no-repeat;
            background-size: 100% 100%;
            -webkit-filter: blur(8px);
            -moz-filter: blur(8px);
            -o-filter: blur(8px);
            -ms-filter: blur(8px);
            filter: blur(8px);
        }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('container'); ?>



    <div class="top">

    </div>
    <div id="page-wrapper" style="margin-top: -70px">
        <div id="iscroll-handler" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">

                
                <ul class="mclist">
                    <?php $__currentLoopData = $wxcards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $wxcard): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                        <li>
                            <a href="<?php echo e(url('/user/wxcard-login?id_wxuser_mcard=').$wxcard->id_wxuser_mcard); ?>" class="viewport-flip">
                                <div class="flip inright in">
                                    <div class="mcard " style="background-image: url('/images/wxcard_bgshading/<?php echo e($wxcard->mcard->card_shading); ?>'); background-color: <?php echo e($wxcard->mcard->card_bgcolor); ?>;">
                                        <h1 class="merchantname"><?php echo e($wxcard->mcard->name); ?></h1>
                                        
                                        <span class="mcardname" style="color: #d7003a;"><?php echo e($wxcard->card_no); ?></span>
                                    </div>
                                </div>
                                <div class="flip outleft out">
                                    <div class="mcard " style="background-image: url('/images/wxcard_bgshading/<?php echo e($wxcard->mcard->card_shading); ?>'); background-color: <?php echo e($wxcard->mcard->card_bgcolor); ?>;">
                                        <div class="mcard-code weui-flex">
                                            <div class="weui-flex__item" >
                                                <div class="code" data-reg1step="<?php echo e(url('/bind-phone').'/'.$wxcard->id_merchant.'?secret_param='.strrev(base64_encode(strrev($wxcard->card_no)))); ?>"></div>
                                            </div>
                                            <div class="weui-flex__item">分享给朋友</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>


        </div>
    </div>


<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>
    <script type="text/javascript" src="<?php echo e(asset('js/jquery.qrcode.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('/js/jquery.mobile.custom.js')); ?>"></script>
    <script>
        $(document).ready(function(){
            $('.mcard-code .code').each(function(k, code){
                $(code).qrcode({
                    width: 110,
                    height: 110,
                    render: 'canvas',
                    text: $(code).attr('data-reg1step')
                });
            });

            var mcardSwipeLeft = function(mcard){
                if(!$(mcard).hasClass('fliping')){
                    $(mcard).addClass('fliping');
                    var inEle = $(mcard).find('.in');
                    var outEle = $(mcard).find('.out');
                    inEle.addClass("outleft").addClass("out").removeClass("inright").removeClass("inleft").removeClass("in");
                    setTimeout(function() {
                        outEle.addClass("inright").addClass("in").removeClass("outleft").removeClass("outright").removeClass("out");

                        $(mcard).removeClass('fliping');
                    }, 225);
                }
            };
            var mcardSwipeRight = function(mcard){

                if(!$(mcard).hasClass('fliping')){
                    $(mcard).addClass('fliping');
                    var inEle = $(mcard).find('.in');
                    var outEle = $(mcard).find('.out');
                    inEle.addClass("outright").addClass("out").removeClass("inleft").removeClass("inright").removeClass("in");
                    setTimeout(function() {
                        outEle.addClass("inleft").addClass("in").removeClass("outright").removeClass("outleft").removeClass("out");

                        $(mcard).removeClass('fliping');
                    }, 225);
                }
            };
            $('.viewport-flip').on({
                'swipeleft': function(e){
                    mcardSwipeLeft($(this));
                },
                'swiperight': function(e){
                    mcardSwipeRight($(this));
                }
            });
        });


    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts._main', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>